<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

	<link rel="stylesheet" type="text/css" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="css/index/topHeader.css" />
    
    <link rel="stylesheet" type="text/css" href="css/detail/detail.css" />
    <link rel="stylesheet" type="text/css" href="css/detail/comments.css" />
    <link rel="stylesheet" type="text/css" href="css/detail/middleBar.css" />
    <link rel="stylesheet" type="text/css" href="./libs/JqueryShare/share.min.css" />

    <!-- 分页css -->
	<link href="libs/vuePaging/VuePaging/zpageNav.css" rel="stylesheet" />

    <style type="text/css">
        .social-share .social-share-icon {
            width: 32px;
            height: 32px;
            line-height: 32px;
        }
	</style>

	<link rel="shortcut icon" href="img/lzy-toutiao.png" />

	<title id="pageTitle">[此处显示文章title]</title>
</head>

<body>
    <div id="detailContainer">
        <!-- 顶部导航头 header -->
        <div class="white-header">
            <div class="white-bar">
                <div class="left-part">
                    <div class="logo-wrapper" @click="goIndex()">
                        <img src="./img/lzy-news-logo.png" class="big-logo"/>
                    </div>

                    <div class="menus">
						<!-- single-selected -->
						<div class="single-default" v-bind:class="{'single-selected': (cat.id==selectedCatId)}" v-for="(cat, index) in catList" v-key="index">
							<!-- menu-selected -->
							<a href="javascript:void(0);" class="white-header-left" style="text-decoration:none;" v-bind:class="{'menu-selected': (cat.id==selectedCatId)}" @click="queryByCategory(cat.id)">{{cat.name}}</a>
						</div>
						<div class="single-default">
                            <a href="./writer.html" target="_blank" class="white-header-left">文章管理</a>
                        </div>
					</div>
                </div>

                <div class="right-part">
					<!-- 如果登录则不显示 -->
					<block v-if="userInfo == null">
						<a href="javascript:(0);" @click="doLogin()" target="_blank" class="white-header-right-start">登录 | 注册</a>
					</block>
					<a href="javascript:(0);" @click="goWriterCenter()" target="_blank" class="white-header-right">作家中心</a>
					<a href="javascript:(0);" @click="goAdminCenter()" target="_blank" class="white-header-right" style="margin-right: 20px;">管理平台</a>
				</div>
            </div>
        </div>
        
        <!-- 中间主体部分 -->
        <div class="container">
            
            <div class="big-title" v-bind:class="{'big-title-bottom': (articleDetail.readCounts == '' || articleDetail.readCounts == null)}">
                {{articleDetail.title}}
            </div>
            <div class="read-counts" v-show="articleDetail.readCounts != '' && articleDetail.readCounts != null">
                阅读量：{{articleDetail.readCounts}}
            </div>

            <div class="detail-really">

                <!-- 左侧分享 -->
                <div class="left-social">

                    <div class="date-title">
                        <span class="year">{{formatDataYear(articleDetail.publishTime)}}</span>
                    </div>
                    <div class="back-year-line"></div>

                    <div class="date-md">{{formatDataMonthDay(articleDetail.publishTime)}}</div>

                    <div class="date-times">{{formatDataTime(articleDetail.publishTime)}}</div>

                    <div class="writer-name" @click="showWriter(articleDetail.publishUserId)">
                        {{articleDetail.publishUserName}}
                    </div>

                    <div class="imooc-words">
                        <span class="imooc-num">xx媒体号</span>
                    </div>

                    <div class="share-title">
                        <span class="share-words">分享</span>
                    </div>
                    <div class="back-line"></div>

                    <div class="social-line" @click="shareWeiBo">
                        <img src="./img/social/weibo.png" class="social-pic"/>
                        <span class="social-words">微博</span>
                    </div>
                    <div class="social-line" @click="shareDouBan">
                        <img src="./img/social/douban.png" class="social-pic"/>
                        <span class="social-words" >豆瓣</span>
                    </div>
                    <div class="social-line" @click="shareQQ">
                        <img src="./img/social/qq.png" class="social-pic"/>
                        <span class="social-words">QQ</span>
                    </div>
                    <div class="social-line" @click="shareQZone">
                        <img src="./img/social/qzone.png" class="social-pic"/>
                        <span class="social-words">QQ空间</span>
                    </div>
                    <div class="social-line" @click="shareWeChat">
                        <div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"
                            data-disabled="google,twitter,facebook,douban,qzone,qq,weibo,tencent,linkedin,diandian" >
                            <!-- <img src="./img/social/wechat.png" class="social-pic"/> -->
                            <!-- <span class="social-words">微信</span> -->
                        </div>
                        <span class="social-words">微信</span>
                    </div>
                </div>

                <!-- 中间文章主体 -->
                <div class="container-middle">
                    <div class="article-wrapper">

                        <div class="content" v-html="articleDetail.content">
                        </div>

                        <div class="declare">

                        </div>
                    </div>

                    <div class="comments-wrapper">

                        <div class="comments-words">
                            <div class="comments-words-left">
                                <div class="comments-big">留言评论</div>
                                <div class="comments-warn">文明上网理性发言</div>
                            </div>

                            <!-- <div class="comments-counts">{{articleDetail.commentCounts}}条评论</div> -->
                            <div class="comments-counts">{{commentCounts}}条评论</div>
                            
                        </div>

                        <div id="summernote" class="summernote"></div>
                        <div class="say-sth-wrapper">
                            <button class="say-sth" @click="doComment(0)">发表评论</button>
                        </div>

                        <div class="all-comments-wrapper">
                            <div class="all-comments">所有评论</div>
                        </div>

                        <div class="all-comments-list-wrapper">

                            <div class="all-comments-list" v-for="(comment,index) in commentList" :key="index">
                                <div class="single-comment-wrapper">
                                    <img src="./img/face1.png" class="user-face"/>
                                </div>

                                <div class="comment-info-wrapper">
                                    <div class="publish-info">
                                        <div>{{comment.commentUserNickname}}</div>
                                        <div class="publish-date">{{formatData(comment.createTime)}}</div>
                                    </div>

                                    <!-- 回复的内容，如果判断是回复别人的留言，则再此引用一下 -->
                                    <div class="quote-wrapper" v-show="comment.quoteUserNickname != null">
                                        <span class="quote-content">
                                            <!-- <span>回复“</span> -->
                                            <span><strong>{{comment.quoteUserNickname}}</strong>：</span><span v-html="comment.quoteContent"></span>
                                            <!-- <span>”</span> -->
                                        </span>
                                    </div>

                                    <div class="blank-wrapper" v-show="comment.quoteUserNickname == null">
                                    </div>

                                    <div class="publish-content" v-html="comment.content">
                                    </div>
                                    
                                    <div class="reply-wrapper" @click="doReply(comment.commentId)">
                                        <img class="icon-reply"/> 
                                        <!-- src="./img/icon-reply.png"  -->
                                        <div class="reply-words">回复</div>
                                    </div>

                                    <!-- nowReplyingFatherCommentId: 根据当前用户正在回复的父commentId进行页面的留言看展示或隐藏 -->
                                    <div class="reply-content-wrapper" v-show="nowReplyingFatherCommentId==comment.commentId">
                                        <textarea :id="'reply-to-' + comment.commentId" class="reply-content"></textarea>
                                        <button class="reply-btn" @click="replyToComment(comment.commentId)">回复</button>
                                    </div>
                                </div>
                            </div>

                            <!-- 分页 start-->
                            <div class="wrap" id="wrap">
                                <zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total" 
                                    v-bind:max-page="maxPage"  v-on:pagehandler="doPaging">
                                </zpagenav>
                            </div>
                            <!-- 分页 end-->
                
                        </div>
                    </div>
                </div>

                <div class="blank-right"></div>
            </div>
        </div>
    </div>
    <script src="libs/vue.min.js"></script>
    <script src="libs/axios.min.js"></script>
    <!-- <script src="libs/jquery-1.7.2.min.js"></script> -->

    <!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.js"></script> -->

    <link href="./libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="./libs/jquery-3.4.1.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <link href="./libs/summernote/dist/summernote.css" rel="stylesheet">
    <script src="./libs/summernote/dist/summernote.js"></script>
    
    <!-- 中文汉化 -->
    <script src="libs/summernote/lang/summernote-zh-CN.js"></script>
    <!-- vue 分页 -->
    <script src="libs/vuePaging/VuePaging/zpageNav.js"></script>
    <script src="js/app.js"></script>
    <script type="text/javascript" src="./libs/JqueryShare/jquery.share.min.js"></script> 
    <script src="libs/moment-with-locales.min.js"></script>

    <script type="text/javascript">

        var articleList = new Vue({
            el: "#detailContainer",
            data: {
                nowReplyingFatherCommentId: 0,  // 根据当前用户正在回复的父commentId进行页面的留言看展示或隐藏
                userInfo: null,

                articleId: "",
                articleDetail: {},

                // 文章分类列表
                catList: [],
                selectedCatId: "",		// 被选中的当前的分类id
                // isSelected = (cat.id==selectedCatId)

                commentList: [],    // 评论列表
                commentCounts: 0,

                page: 1, // 分页页数
                pageSize: 10, // 分页每页显示数量
                maxPage: 1, // 总页数
                total: 1, // 总记录数
            },
            created() {
                var me = this;
                // 通过cookie判断用户是否登录
                app.judgeUserLoginStatus(me);

                // 查询文章详情
                var articleId = app.getUrlParam("articleId");
                // console.log(articleId);
                this.articleId = articleId;
                this.getArticleDetail(articleId);

                // 获得分类
                this.getAllCategory();
                // 文章阅读数累加
                this.readArticle(articleId);

                // 获得文章的评论列表
                this.getAllComments(1, 10);
                // 获得文章评论数
                this.getCommentCounts();
            },
            mounted() {
                // 初始化编辑器
                $('#summernote').summernote({
                    placeholder: '随便说几句吧...',
                    lang: 'zh-CN',
                    height: 200,
                    width: 700,
                    border: 0,
                    // disableDragAndDrop: true, // 禁止文件拖放
                    toolbar: [
                    ],
                    // 回调函数
                    callbacks: {
                        // summernote 初始化
                        onInit: function() {
                            $(".panel").css({"margin-bottom": "10px"});  
                        }
                    }
                });
            },
            methods: {
                // 文章阅读数累加
                readArticle(articleId) {
                    var me = this;

                    var articleServerUrl = app.articleServerUrl;
                    axios.defaults.withCredentials = true;
                    axios.post(articleServerUrl + "/portal/article/readArticle?articleId=" + articleId)
                    .then(res => {
                        // console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            
                        } else {
                            console.log(res.data.msg);
                        }
                    });
                },
                // 跳转作家页面
                showWriter(writerId) {
                    window.open("writer.html?writerId=" + writerId);
                },
                // 查询文章详情
                getArticleDetail(articleId) {
                    var me = this;

                    var articleServerUrl = app.articleServerUrl;
                    axios.defaults.withCredentials = true;
                    axios.get(articleServerUrl + "/portal/article/detail?articleId=" + articleId)
                    .then(res => {
                        // console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var result = res.data.data;
                            me.articleDetail = result;
                            console.log(JSON.stringify(me.articleDetail));

                            $("#pageTitle").html(result.title);
                        } else {
                            alert(res.data.msg);
                        }
                    });
                },
                
                // 获得文章评论数
                getCommentCounts() {
                    var me = this;
                    var articleServerUrl = app.articleServerUrl;
                    axios.defaults.withCredentials = true;
                    axios.get(articleServerUrl + "/comment/counts?articleId=" + me.articleId)
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var commentCounts = res.data.data;
                            me.commentCounts = commentCounts;
                        } else {
                            console.log(res.data.msg);
                        }
                    });
                },

                // 获得文章的评论列表
                getAllComments(page, pageSize) {
                    var me = this;
                    var articleServerUrl = app.articleServerUrl;
                    axios.defaults.withCredentials = true;
                    axios.get(articleServerUrl + "/comment/list?articleId=" + me.articleId + 
                                                                    "&page=" + page + 
                                                                    "&pageSize=" + pageSize)
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var grid = res.data.data;
                            var commentList = grid.rows;
                            me.commentList = commentList;

                            me.page = grid.page;  // 当前页数累加1，用于后续页面滚动分页
                            var maxPage = grid.total; // 获得总页数
                            var total = grid.records; // 获得总记录数

                            this.maxPage = maxPage;
                            this.total = total;
                            
                        } else {
                            console.log(res.data.msg);
                        }
                    });
                },

                // 点击回复出现回复框
                doReply(fatherCommentId) {
                    // 如果用户点击的当前的评论回复id和nowReplyingFatherCommentId一致，则隐藏，如果不一致，则显示
                    if (fatherCommentId == this.nowReplyingFatherCommentId) {
                        this.nowReplyingFatherCommentId = 0;
                    } else {
                        this.nowReplyingFatherCommentId = fatherCommentId;
                    }
                },

                // 用户留言或回复
                doComment(fatherCommentId) {
                    console.log(fatherCommentId);
                    var articleContent = $('#summernote').summernote('code');
                    this.commentDisplay(fatherCommentId, articleContent);
                },
                // 调用后端，留言保存
                commentDisplay(fatherCommentId, articleContent) {
                    
                    var me = this;
                    var utoken = app.getCookie("utoken");
                    var uid = app.getCookie("uid");
                    
                    var commentReplyBO = {
                        articleId: me.articleId,
                        fatherId: fatherCommentId,
                        commentUserId: uid,
                        content: articleContent
                    };
                    
                    var articleServerUrl = app.articleServerUrl;
                    axios.defaults.withCredentials = true;
                    axios.post(articleServerUrl + '/comment/createComment',
                        commentReplyBO,
                        {
                            headers: {
                                'headerUserId': uid,
                                'headerUserToken': utoken
                            }
                        }
                    )
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            // 清空评论框中内容
                            $('#summernote').summernote('reset');
                            $("#reply-to-" + fatherCommentId).val("");

                            // 重新查询评论与评论数
                            me.getAllComments(1, 10);
                            me.getCommentCounts();
                        } else {
                            // alert(res.data.msg);
                            alert(JSON.stringify(res.data.data));
                        }
                    });
                },
                // 用户回复其他用户的评论，点击后保存到后端
                replyToComment(fatherCommentId) {
                    // TODO: 通过循环的评论id，根据id获得后再拿到回复的内容
                    // console.log(fatherCommentId);

                    var content = $("#reply-to-" + fatherCommentId).val();

                    // console.log(content);
                    this.commentDisplay(fatherCommentId, content);
                },

                // 获得所有文章领域
                getAllCategory() {
                    var me = this;
                    var adminServerUrl = app.adminServerUrl;
                    axios.defaults.withCredentials = true;
                    axios.get(adminServerUrl + "/categoryMng/getCats")
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var catList = res.data.data;
                            me.catList = catList;
                            // console.log(catList);
                        } else {
                            alert(res.data.msg);
                        }
                    });
                },
                // 根据分类Id获得tag颜色
                getCatTagColor(catId) {
                    var catList = this.catList;
                    for (var i = 0 ; i < catList.length ; i ++) {
                        if (catId == catList[i].id) {
                            return catList[i].tagColor;
                            break;
                        }
                    }
                },
                // 根据分类Id获得名称
                getCatName(catId) {
                    var catList = this.catList;
                    for (var i = 0 ; i < catList.length ; i ++) {
                        if (catId == catList[i].id) {
                            return catList[i].name;
                            break;
                        }
                    }
                },
                // 格式化日期
                formatData(times) {
                    var date = moment(times).format('YYYY-MM-DD hh:mm:ss');
                    return date;	
                },
                formatDataYear(times) {
                    var date = moment(times).format('YYYY');
                    return date;	
                },
                formatDataMonthDay(times) {
                    var date = moment(times).format('MM/DD');
                    return date;	
                },
                formatDataTime(times) {
                    var date = moment(times).format('hh:mm:ss');
                    return date;	
                },

                // 分页实现方法 跳转到page页
                doPaging: function (page) {
                    this.page = page;
                    this.getAllComments(page, this.pageSize);
                },
                // 跳转登录
                doLogin() {
                    window.location = app.writerLoginUrl;
                },
                goWriterCenter() {
                    window.open(app.writerIndexUrl);
                },
                goAdminCenter() {
                    window.open(app.adminCenterUrl);
                },
                // 以下都是社交分享
                shareWeiBo() {
                    var weiBoShareUrl = 'http://v.t.sina.com.cn/share/share.php';
                    weiBoShareUrl += '?url='+ encodeURIComponent(document.location);    //参数url设置分享的内容链接|默认当前页location，可选参数
                    weiBoShareUrl += '&title=' + encodeURIComponent(document.title);    //参数title设置分享的标题|默认当前页标题，可选参数
                    weiBoShareUrl += '&source=' + encodeURIComponent('');
                    weiBoShareUrl += '&sourceUrl=' + encodeURIComponent('');
                    weiBoShareUrl += '&content=' + 'utf-8';                             //参数content设置页面编码gb2312|utf-8，可选参数
                    weiBoShareUrl += '&pic=' + encodeURIComponent('');                  //参数pic设置图片链接|默认为空，可选参数
                    window.open(weiBoShareUrl, '_blank');
                },
                shareDouBan() {
                    var douBanShareUrl = 'http://shuo.douban.com/!service/share?';
                    douBanShareUrl += 'href=' + encodeURIComponent(location.href);      //分享的链接
                    douBanShareUrl += '&name=' + encodeURIComponent(document.title);    //分享的标题
                    window.open(douBanShareUrl, '_blank');
                },
                shareQQ() {
                    var qqShareUrl = 'https://connect.qq.com/widget/shareqq/iframe_index.html?';
                    qqShareUrl += 'url=' + encodeURIComponent(location.href);           //分享的链接
                    qqShareUrl += '&title=' + encodeURIComponent(document.title);       //分享的标题
                    window.open(qqShareUrl, '_blank');
                },
                shareQZone() {
                    var qzoneShareUrl = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
                    qzoneShareUrl += 'url=' + encodeURIComponent(document.location);    // 参数url设置分享的内容链接|默认当前页location
                    qzoneShareUrl += '&title=' + encodeURIComponent(document.title);    // 参数title设置分享标题，可选参数
                    window.open(qzoneShareUrl, '_blank');
                },
                shareWeChat2() {
                    var target_url = 'http://zixuephp.net/inc/qrcode_img.php?url=' + document.location.href;
                    target_url = 'http://zixuephp.net/inc/qrcode_img.php?url=http://www.itzixi.com';
                    window.open(target_url, 'weixin', 'height=320, width=320');
                },
                shareWeChat() {
                },
                // 前往首页
                goIndex() {
                    window.location = app.portalIndexUrl;
                }
            },
            
        });
    </script>
</body>

</html>